<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three 网格布局</title>
    <script src="js/three.js"></script>
    <style>
        #container{
            border:1px dotted orange;
            width:90%;
            height:500px;
            margin:0 auto;
        }
    </style>
</head>
<body onload="threeStart()">
    <div id="container"></div>
</body>
<script>
    //设置渲染器
    var renderer;
    function initThree(){
        width=document.getElementById('container').clientWidth;
        height=document.getElementById('container').clientHeight;
        renderer=new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(width,height);
        document.getElementById('container').appendChild(renderer.domElement);
        renderer.setClearColor(0xFFFFFF,1.0);
    }

    //设置相机
    var camera;
    function initCamera(){
        camera=new THREE.PerspectiveCamera(45,width/height,1,5000);
        camera.position.x=0;
        camera.position.y=1000;
        camera.position.z=0;
        camera.up.x=0;
        camera.up.y=0;
        camera.up.z=1;
        camera.lookAt({
            x:0,
            y:0,
            z:0
        });
    }
    //设置场景
    var scene;
    function initScene(){
        scene=new THREE.Scene();
    }
    //设置灯光
    var light;
    function initLight(){
        light=new THREE.DirectionalLight(0xFF0000,1.0,0);
        light.position.set(100,100,200);
        scene.add(light);
    }
    //设置物体
    var cube;
    function initObject(){
        var geometry=new THREE.Geometry();
        geometry.vertices.push(new THREE.Vector3(-500,0,0));
        geometry.vertices.push(new THREE.Vector3(500,0,0));
        for(var i=0;i<=20;i++){
            var line=new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000,opacity:0.2}));
            line.position.z=(i*50)-500;
            scene.add(line);

            var line=new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000,opacity:0.2}));
            line.position.x=(i*50)-500;
            line.rotation.y=90*Math.PI/180;
            scene.add(line);
        }
    }
    function threeStart(){
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        renderer.clear();
        renderer.render(scene,camera);
    }
</script>
</html>